3.1 Fundamental concepts for HTML and CSS

HTML elements and their attributes, and CSS properties
- An HTML document(or page) is like a tree of HTML elements.
- List all the HTML elements that you know.
- What is the main purpose of using attributes? How about CSS?
- What does inheritance in the hierarchical structure mean? For example, what color is used for 'inheritance' in the next code?
```
<p style='color:Blue'>
    What does <b>inheritance</b> in the hierarchical structure mean?
<p>
```
- Trial 1: Let's try the above example, with the following.
  <p ???='????Blue'> What does <b>inheritance</b> in the hierarchical structure mean? </p>
Box model
- Read all in CSS Box Model.
- What components are included in the box model?
- Which component(s) is(are) included in width and height of an HTML element box? Content only
- What is the default width for <p>? Default width for other elements?
- How are attributes and properties different?
- Here is an example.
```
<div style='border: 1px solid black'>
    <div style='margin: 20px; border: 10px solid blue; padding: 20px; background-color:Gray; font-size:150%;'>
        <div style='border: 1px solid black'>
            <span style='background-color:Green'>Hmmm</span>
            <p style='background-color:Red'>Amazing!</p>
            <a href='cs.tru.ca' target='_blank' style='background-color:Cyan'>CS.TRU.CA</a>
        </div>
    </div>
</div>
```
  Hmmm
  Amazing!
  CS.TRU.CA
- Trial 2: The middle <div> will have the margin of 20px, the border line of 10px thickness, the padding of 20px. Can you change the width and height of any HTML element? Let's try with <span> or <a>, and <p>.
  <div style='border: 1px solid black'> <div ???='???: 20px; ???: 10px solid blue; ???: 20px; background-color:Gray; font-size:150%;'> <div style='border: 1px solid black'> <span ???='background-???:Green; ????'>Hmmm. Interesting!</span> <p style='background-color:Red; ????'>Amazing!</p> <a ???='//cs.tru.ca' ???='_blank' ???='background-color:Cyan; ????'>CS.TRU.CA</a> </div> </div> </div>
- How to get width and height of an element in JavaScript code? See clientHeight, clientWidth, offsetHeight, offsetWidth in The HTML DOM Element Object
- How to get the position of an element in JavaScript code? See offsetTop, offsetLeft in The HTML DOM Element Object
Two display types of element - How to display elements
- Inline type elements - For examples, ...
- Block type elements - For examples, ...
- How are they different? Inline elements are displayed at the side, and block elements are displayed at the next line.
- Default width for block elements?
- Here is an example.
```
<div style='border: 2px blue solid'>
    <p style='width: 400px; border: 2px black solid''>
         Strike while the iron is hot. 
    </p>
    <span style='border: 2px green solid'>
        Too many cooks spoil the broth.
        <div style='border: 2px yellow solid; width: 400px;'>
            You can't have your cake and eat it too.  
        </div>
        Many hands make light work.  
    </span>
    <span style='border: 2px black solid; width:400px'>
        When in Rome, do as the Romans do. 
    </span>
    <p style='border: 2px black solid; width=50%'>
        Don't cross the bridge until you come to it.  
    </p>
    <span> <-- Will it be display at the side of the above paragraph? -->
        Honesty is the best policy.
    </span>
</div>
```
  P: Strike while the iron is hot.
  SPAN: Too many cooks spoil the broth.
  DIV: You can't have your cake and eat it too.
  Many hands make light work. SPAN: When in Rome, do as the Romans do.
  P: Don't cross the bridge until you come to it.
  SPAN: Honesty is the best policy.
- Trial 3: Try yourself headings, p, span, div, a, img ('html5.png'), ul, li. Find out which ones are of inline type and which ones are of block type.
  <???>Wonderful World!</h1> <p>Beautiful day</p> <div> <???> <???>HTML5</li> <???>CSS3</li> <???>JavaScript<???> </ul> <span>Another story</span> <a ???='//cs.tru.ca' ???='_blank'>CS.TRU.CA</a> <img ????> </div>
- Can you change height and width of any inline elements? Directly? No. Then is there any way to change the width and height of inline elements?
Displaying - How to change the display type
- CSS property to change display type ??? display
- Display types?
  - block
  - inline
  - inline-block
  - none
  - ...
- Here is an example of 'inline-block'.
```
<div style='border: 2px blue solid'>
    DIV: 
    <span>
        SPAN: The grass is always greener on the other side of the fence.
        <span style='display:inline-block; border: 2px yellow solid; width: 250px; text-align: center'>
            SPAN: TRUFA
        </span>
        Don't judge a book by its cover.  
    <span>
</div>
```
  DIV: SPAN: The grass is always greener on the other side of the fence. SPAN: TRUFA Don't judge a book by its cover.
- Trial 4: Let's try to change <span> to block type and test. You may change <p> to inine-block type as well.
  <p> The grass is always greener on the other side of the fence. <span ???='???:???; border: 2px yellow solid; width:100px'>TRUFA</span> Don't judge a book by its cover. </p>
- Trial 5: Let's try to change <div> to 'none' type and test what will be displayed.
  <div ???> The grass is always greener on the other side of the fence.<br> Don't judge a book by its cover. </div>
Grouping
- Why do you need to group elements?
- As an inline element, ??? <span>
- As a block element, ??? <div>
- The above two elements are called containers, inline container and block container.
- How to make an element or a group of elements disappear when a button is clicked? This could be used for modal windows. Here is an example.
  
  "This sentence will be disappered when the button is clicked."
- Trial 6: Let's try to hide <div> and show it using a button. Initially the <div> is displayed. Hint. document.getElementById(...)....
  <div id="t6-div"> <p>Interesting!</p> <img ???="html5.png" width="50px" height="50px"></img> </div> <button id="t6-button" type="button">Click me!</button> <???> var displayed = true; ????.addEventListener("click", function() { // Do you remember how to register event listeners? ???? // Make the div disappear }); </script>
Positioning
- List the four positioning methods. How are they different?
  - Static - the normal flow of elements with their display types; default type
  - Relative - relative to normal position
  - Fixed - relative to the viewport, which means it always stays in the same place even if the page is scrolled.
  - Absolute - relative to the nearest positioned (anything but static) ancestor (Note <body> is considered as a positioned element.)
  - [Sticky - between relative and fixed with scroll bars]
- Read all in CSS Layout - The position Property.
- In the 4^th example in the above link, what will happen if the outer <div> does not use the relative positioning?
- Four position properties?
  - top
  - bottom
  - left
  - right
  - How about right and bottom?
- Here is another example.
```
<div style='border:1px solid black'>
    <p>
        Positioning examples:
    </p>
    
    <div style='position:relative; width:400px; height:200px; border:1px solid black;'>
        <div style='position:absolute; top:10px; right: -50px; width:250px; height:100px; border:2px solid blue;'></div>
        <div style='position:relative; top:50px; right: -50px; width:250px; height:100px; border:2px solid green;'>
            <p style='position:relative; left:25px; top:5px; width:100px; margin:0px; text-align:center; border:2px solid red;'> 
                Interesting!
            </p>
            Ahhhhhhh
            
            <p style='position:absolute; left:50px; width:100px; margin:0px; text-align:center; border:2px solid yellow;'>
                Hmmmmm
            </p>
        </div> 
    </div>
</div>
```
  Can you show how the above code is displayed? Click here to see it.
  
  Positioning examples:
  
  Interesting!
  Ahhhhhhh
  Hmmmmm
- Trial 7.1: Try yourselves the above example.
- Trial 7.2: Let's try to display an <ul> right below a <li id='tr7-2-menu-head'>, where the <ul> is a child element of the <li>. One good practice for good positioning is to use 'relative' or 'absolute' for the parent element and 'absolute' for child elements.
  <style> #tr7-2-menu-head { list-style:none; /**/ width:140px; text-align:center; border:1px solid black; background-color:White; position:???; left:50px; } #tr7-2-menu-head:hover { background-color:Grey; } #tr7-2-menu-head ??? ul { list-style:none; padding:0; margin:0; border:1px solid blue; background-color:White; position:???; top:???; /* 100% of the height of the parent */ left:???; } #tr7-2-menu-head > ul ??? li:??? { background-color:Grey; } </style> <div style='height:100px;'> <li id='tr7-2-menu-head'>Web Tech Courses <ul>  <li>COMP 2680</li> <li>COMP 3540</li> <li>COMP 4620</li> </ul> </li> </div>
- Trial 7.3: Let's try to display an <ul> right below a <li id='tr7-3-menu-head'>, where the <ul> is a child element of the <li>, only when the mouse moves over the <li>. Initially, <ul> is not visible.
  <style> #tr7-3-menu-head { list-style:none; width:140px; text-align:center; border:1px solid black; background-color:White; position:relative; left:50px; } #tr7-3-menu-head:hover { background-color:Grey; } #tr7-3-menu-head:??? ??? ??? { display:???; } #tr7-3-menu-head ??? ul { list-style:none; padding:0; margin:0; display:???; /**/ border:1px solid blue; background-color:White; position:absolute; top:100%; left:0; } #tr7-3-menu-head > ul ??? li:??? { background-color:Grey; } </style> <li id='tr7-3-menu-head'>Web Tech Courses <ul> <li>COMP 2680</li> <li>COMP 3540</li> <li>COMP 4620</li> </ul> </li>
- Trial 7.4: Let's try to display an <ul> at the right side of a <li id='tr7-2-menu-head'>, where the <ul> is a child element of the <li>.
  <style> #tr7-4-menu-head { list-style:none; width:140px; text-align:center; border:1px solid black; background-color:White; position:???; left:50px; } #tr7-4-menu-head:hover { background-color:Grey; } #tr7-4-menu-head ??? ul { list-style:none; padding:0; margin:0; display:block; width:100px; border:1px solid blue; background-color:White; position:???; top:???; ????; } #tr7-4-menu-head > ul ??? li???? { background-color:Grey; } </style> <li id='tr7-4-menu-head'>Web Tech Courses <ul> <li>COMP 2680</li> <li>COMP 3540</li> <li>COMP 4620</li> </ul> </li>
- An example of drop-down menu
  - - COMP2680
    - COMP3540
    - COMP3710
- Trial 8: Let's write the code for the above drop-down menu, with 'menu_icon.png'.
  <style> #ddm2 li { list-style: none } #ddm2 > li > ul { padding: 0; margin:0 } ???? </style> <ul id='ddm2'> <li style='width: 50px;'><img src='menu_icon.png' width='50px' height='50px'></img> <ul> <li>COMP2680</li> <li>COMP3540</li> <li>COMP3710</li> </ul> </li> </ul>
- Measurement units
  - px - pixel
  - % - relative to parent width or height; 0% ~ 100%; Note that % works with well with absolute positioning.
  - 0
  - vw - relative to viewport width; 0vw ~ 100vw
  - vh - relative to viewport height; 0vh ~ 100vh; Note that vw and vh are good choice for fixed positioning.
Overlapping
- When HTML elements are positioned, they can be overlapped. Which element should be displayed first?
- Read all in CSS Layout - The z-index Property.
- Warning: 'z-index' works only with poisitioned elements with relative, fixed, and absolute.
- Warning: 'z-index' is inherited to all the descendants no matter what value is re-specified in the descendants.
- Trial 9: Let's try to display 'HTML5' over 'html5.png'.
  <span ???='???:relative; right:???; z-index:???'>HTML5</span> <img ???='html5.png' width='50px' ???='50px' ???='position:relative; ???:2'></img>
- Can you make a modal window? E.g., We will study it later in detail.
How to control HTML elements from JavaScript code?
- All the HTML elements are modeled in a DOM tree as objects. You need to know how to get those HTML element objects.
- Example
- We can select HTML elements with the attribute 'id', tag names, and CSS selectors
- document.getElementById('...'); document.getElementsByTagName('...'); document.querySelectorAll("...");
- document.getElementById('...').innerHTML
- document.getElementById('...').setAttribute(), .getAttribute(), .style.setProperty(), .style.getProperty(); E.g., .style.setProperty('background-color', 'Cyan')
- document.getElementById('...').attribute; E.g., .style.property
- How about background-color? You need to use camel back notation; E.g., .style.backgroundColor('Red')
- How to change CSS values?
- How to register event listeners? List the three types.
  - document.getElementById('...').addEventListener('event-name', function() { ... });
- Trial 10: Let's try to hide and show 'html5.png' using a button.
  <div id="tr10-div"> <p>Interesting!</p> <img id='tr10-img' ???='html5.png' ???='50px' height='50px'></img> </div> <button id='tr10-button' type='button'>Click me!</button> <script> ????.???('click', ???() { if (???? == ???) ???? else ???? }); </script>
How to read default CSS properties that are not defined in style attribute? How to read actual width and height that are decided by the content?
- The CSS properties defined in <style> tags CANNOT be accessed through document.getElementById(...).style object in JavaScript. Default values as well.
- window.getComputedStyle(domobj).cssProperty should be used, even for default values.
- When domobj is visible, domobj.clientWidth and .clientHeight give numbers of pixels. E.g., 100, not 100px. You may read The HTML DOM Element Object.
- Here is an example.
```
<style>
    #testcssjs {
        display: none;
    }
</style>
<div id='testcssjs'>
    Hmmm
</div>
<script>
    alert("1. " + document.???('testcssjs').???.display);  // Nothing displayed because 'display' is not specified with the style attribute.
    alert("2. " + ????(document.getElementById('testcssjs')).???);  // 'none' displayed
    document.getElementById('testcssjs').style.display = 'block';
    alert("3. " + document.getElementById('testcssjs').style.display);  // 'block' displayed
    alert("4. " + document.getElementById('testcssjs').style.height);
    alert("5. " + ????(document.getElementById('testcssjs')).display);  // ??? displayed
    alert("6. " + ????(document.getElementById('testcssjs')).height);  // 24px
    alert("7. " + document.getElementById('testcssjs').clientHeight);  // 24, not 24px
</script>
```
- Trial 11: Let's try the above example.
- Reference: https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle